<template>
  <!-- header -->
  <view class="header">
    <image src="@/static/headerBgi2.png" mode="aspectFill" />
    <view class="contain">
      <!-- 返回 -->
      <view>
        <image @click="goBack" src="@/static/back.png" mode="aspectFill"></image>
      </view>
      <text>我的报名</text>
    </view>
  </view>

  <!-- container -->
  <view class="container" :style="{ padding: '44rpx 30rpx ' +  (match===2 ? '128rpx' : '30rpx') + ' 30rpx' }">
    <!-- 匹配进度 -->
    <view class="progress">
      <view class="title">
        <text>匹配进度</text>
      </view>
      <!-- 状态 -->
      <view class="status">
        <view class="commit">
          <view class="title"><text>提交报名</text></view>
          <view class="time" v-if="match===-1">---- -- -- -- --</view>
          <view class="time" v-else>{{ signupTime }}</view>
        </view>
        <view class="check" :data-match="match">
          <view class="title" v-if="match===0"><text>单位审核中</text></view>
          <view class="title" v-else><text>单位审核</text></view>
          <view class="time" v-if="match===1 || match===2">{{ matchTime }}</view>
          <view class="time" v-else>---- -- -- -- --</view>
        </view>
        <view class="notice" :data-match="match">
          <view class="title" v-if="match===-1 || match===0"><text>审核通知</text></view>
          <view class="title" v-if="match===1"><text>匹配成功</text></view>
          <view class="title" v-if="match===2"><text>匹配失败</text></view>
          <view class="time" v-if="match===1 || match===2">{{ matchTime }}</view>
          <view class="time" v-else>---- -- -- -- --</view>
        </view>
      </view>
      <!-- 状态显示 -->
      <view class="statusImg">
        <view class="rectangle">
          <view class="circle1"></view>
          <view v-if="!(match===0)" class="circle2"></view>
          <image v-if="match===0" class="img2" src="@/static/-o-.png"></image>
          <view v-if="!(match===1 || match===2)" class="circle3"></view>
          <image v-if="match===1" class="img3" src="@/static/-o-.png"></image>
          <image v-if="match===2" class="img3" src="@/static/-o-red.png"></image>
        </view>
      </view>
      <view class="matchInformation" v-if="match === 1 || match === 2">
        <view class="title">审核意见</view>
        <view class="matchInformationContent">{{ opinion }}</view>
      </view>
      <!-- 报名信息 -->
      <view class="information">
        <view class="title">
          <text>报名信息</text>
        </view>
        <view class="person">
          <view class="details">
            <view class="special">姓名</view>
            <text>{{userinfo.name}}</text>
          </view>
          <view class="details">
            <view class="special">性别</view>
            <text v-if="userinfo.gender===1">男</text>
            <text v-if="userinfo.gender===2">女</text>
          </view>
          <view class="details">
            <view class="special">出生日期</view>
            <text>{{userinfo.birthday}}</text>
          </view>
        </view>
        <view class="school">
          <view class="details">
            <view class="special">在读院校学院</view>
            <text>{{userinfo.college}}</text>
          </view>
          <view class="details">
            <view class="special">专业及年级</view>
            <text>{{userinfo.major}}-{{userinfo.grade}}</text>
          </view>
        </view>
        <!-- 报名表 -->
        <view class="table" @click="handleDownload">
          <image class="tableImg" src="@/static/pdf.png"></image>
          <text>{{pdf.originalFilename}}</text>
          <image class="download" src="@/static/downLoad.png"></image>
        </view>
      </view>
      <!-- 报名详情 -->
      <view class="detail" v-if="!position.requireState">
        <view class="name">
          <text>单位</text>
        </view>
        <view class="informations">
          <text>{{position.unit}}</text>
        </view>

        <view class="name">
          <text>课题研究目标</text>
        </view>
        <view class="informations">
          <text>{{position.content}}</text>
        </view>

        <view class="name">
          <text>岗位名称</text>
        </view>
        <view class="informations">
          <text>{{position.post}}</text>
        </view>

        <view class="name">
          <text>意向高校或专业</text>
        </view>
        <view class="informations">
          <text>{{position.intention}}</text>
        </view>

        <view class="name">
          <text>岗位数量</text>
        </view>
        <view class="informations">
          <text>{{position.quantity}}</text>
        </view>

        <view class="name">
          <text>联系人</text>
        </view>
        <view class="informations">
          <text>{{position.contact}}</text>
        </view>

        <view class="name">
          <text>联系方式</text>
        </view>
        <view class="informations">
          <text>{{position.number}}</text>
        </view>

        <view class="name">
          <text>备注</text>
        </view>
        <view class="informations">
          <text>{{position.remark}}</text>
        </view>
      </view>
      <view class="detailWait" v-else>岗位数据维护中请耐心等待</view>
    </view>
  </view>
  <!-- 匹配失败 显示底部弹窗 -->
  <view class="bottom" v-if="match===2">
    <button class="back" @click="goBack">返回</button>
    <button class="resignup" @click="resignup">重新报名</button>
  </view>

</template>

<script setup>
  import {
    ref
  } from 'vue';
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import {
    matchApi,
    getsignupApi,
    downLoadPdfApi,
    getpositionApi
  } from '@/utils/api';
  import {
    baseURL
  } from '../../utils/http';
  import {
    nextTick
  } from 'vue';
  //signupId
  const signupId = ref(null);
  //是否匹配成功 -1:未报名 0:申请中 1:成功 2:失败
  const match = ref(null);
  //报名时间
  const signupTime = ref(null);
  //匹配
  const matchTime = ref(null);
  //审核意见
  const opinion = ref(null);
  //用户信息
  const userinfo = ref({
    name: '',
    gender: 0,
    birthday: '',
    college: '',
    major: '',
    grade: ''
  });
  //pdf信息
  const pdf = ref({
    originalFilename: '',
    url: ''
  });
  //查看岗位详情需要的requireId
  const requireId = ref(null);
  //岗位信息
  const position = ref({
    unit: '',
    content: '',
    post: '',
    intention: '',
    quantity: 0,
    recruited: 0,
    contact: '',
    number: '',
    remark: '',
    requireState: 1 //0生效 1失效（默认）
  });
  onLoad((options) => {
    // TODO options 获取 signupId 调用接口获取报名详情，requireId 调用getPositonInformation
    if (options.id) {
      signupId.value = options.id
    }
    // 获取报名状态 
    matchApi.getMatchStatus().then(res => {
      match.value = res.data.status;
      console.log('match.value', match.value);

      if (match.value === '-1') {
        uni.showToast({
          title: '您未报名，请先报名',
          icon: 'none'
        })
      } else {
        getsignupApi.getsignup(signupId.value).then(res => {
          //报名时间
          signupTime.value = res.data.createTime;
          //报名人信息
          userinfo.value.name = res.data.name;
          userinfo.value.gender = res.data.gender;
          userinfo.value.birthday = res.data.birthday;
          userinfo.value.college = res.data.college;
          userinfo.value.major = res.data.major;
          userinfo.value.grade = res.data.grade;
          //requireId
          requireId.value = res.data.requireId;
          //matchtime
          matchTime.value = res.data.approveTime;
          //pdf
          console.log(res.data.fileUrl)
          const urlParts = res.data.fileUrl.split('/');
          pdf.value.originalFilename = urlParts[urlParts.length - 1];
          pdf.value.url = res.data.fileUrl;
          //opition
          opinion.value = res.data.approveReview;
          if (requireId.value) {
            getPositonInformation();
          }
        })
      }
    })
  })
  const handleDownload = () => {
    // 拼接完整路径
    const fullPath = baseURL + `/profile/download?fullPath=${pdf.value.url}`;
    console.log(fullPath)
    // 创建 <a> 标签
    const link = document.createElement('a');
    link.href = fullPath;
    link.download = pdf.value.originalFilename // 设置下载的文件名，也可以自定义
    link.target = '_blank'; // 新窗口打开（非必需）
    link.click(); // 触发点击
  };
  // 获取岗位详情信息
  const getPositonInformation = () => {
    getpositionApi.getposition(requireId.value)
      .then((res) => {
        console.log('requireId.value', requireId.value);
        const data = res.data[0];
        position.value.unit = data.unit;
        // 使用正则表达式去除 HTML/XML 标签
        position.value.content = data.content ? data.content.replace(/<[^>]*>/g, '') : '';
        position.value.post = data.post;
        position.value.intention = data.intention;
        position.value.quantity = data.quantity;
        position.value.recruited = data.recruited;
        position.value.contact = data.contact;
        position.value.number = data.number;
        position.value.remark = data.remark;
        position.value.requireState = data.requireState;
        console.log("position.value.requireState", position.value.requireState);
      });
  };

  //返回首页
  const goBack = () => {
    uni.redirectTo({
      url: '/pages/work/index',
    })
  };

  //重新报名
  const resignup = () => {
    uni.redirectTo({
      url: '/pages/work/index'
    })
  }
</script>

<style lang="scss">
  .header {
    position: relative;
    width: 100%;
    height: 128rpx;

    image {
      width: 100%;
      height: 100%;
    }

    .contain {
      position: absolute;
      bottom: 26rpx;
      left: 21rpx;
      display: flex;

      image {
        width: 20rpx;
        height: 35rpx;
        padding-top: 15rpx;
        padding-right: 262rpx;
      }

      text {
        font-family: Source Han Sans CN;
        font-size: 36rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 61rpx;
        letter-spacing: 0rpx;
        color: #ffffff;
      }

    }
  }

  .container {
    padding: 44rpx 30rpx var(--bottom-padding) 30rpx;


    .progress {
      min-height: 244rpx;

      .title {
        font-family: Source Han Sans CN;
        font-size: 30rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 29rpx;
        letter-spacing: 0rpx;
        color: #474b53;
      }

      .status {
        display: flex;
        margin-top: 42rpx;
        width: 100%;
        box-sizing: border-box;
        height: 98rpx;
        font-family: Source Han Sans CN;
        font-weight: normal;
        font-stretch: normal;
        line-height: 29rpx;
        letter-spacing: 0rpx;

        .title {
          white-space: nowrap;
          text-align: center;
          font-size: 28rpx;
          color: #474b53;
        }

        .time {
          width: 171rpx;
          white-space: nowrap;
          text-align: center;
          padding-top: 12rpx;
          font-size: 18rpx;
          color: #7f8387;
        }

        .commit,
        .check,
        .notice {
          padding: 20rpx 24rpx 16rpx 24rpx;
          width: 219rpx;
          margin-right: 16rpx;
          background-color: #f8f9fd;
          border-radius: 10rpx;
        }

        .check {
          width: 220rpx;
        }

        .check[data-match="0"] {
          background-color: #3b7de8;

          .title,
          .time {
            color: #fbfbfb;
          }
        }

        .notice {
          margin-right: 0;
        }
      }

      .notice[data-match="1"] {
        background-color: #3b7de8;

        .title,
        .time {
          color: #fbfbfb;
        }
      }

      .notice[data-match="2"] {
        background-color: #ff0000;

        .title,
        .time {
          color: #fbfbfb;
        }
      }

      .statusImg {
        display: flex;
        align-items: center;
        margin-top: 16rpx;
        height: 16rpx;

        .rectangle {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 calc((100% - ((100% - 32rpx) / 3 * 3)) / 2);
          width: 100%;
          height: 4rpx;
          background-color: #f8f9fd;
          border-radius: 10rpx;
        }

        .circle1,
        .circle2,
        .circle3 {
          position: absolute;
          width: 8rpx;
          height: 8rpx;
          border-radius: 50%;
          background-color: #b7bbbe;
          border-radius: 10rpx;
          z-index: 1;
        }

        .circle1 {
          position: absolute;
          left: 105rpx;
        }

        .circle2 {
          position: absolute;
          left: 340rpx;
        }

        .circle3 {
          position: absolute;
          left: 576rpx;
        }

        image {
          width: 220rpx;
          height: 16rpx;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          z-index: 2;
        }

        .img2 {
          position: absolute;
          left: 235rpx;
        }

        .img3 {
          position: absolute;
          left: 470rpx;
        }
      }
    }

    .matchInformation {
      margin-top: 42rpx;
      padding-top: 42rpx;
      border-top: solid 2rpx #f4f6f7;

      .title {
        margin-bottom: 24rpx;
        font-family: Source Han Sans CN;
        font-size: 30rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 29rpx;
        letter-spacing: 0rpx;
        color: #474b53;
      }

      .matchInformationContent {
        padding: 24rpx 20rpx 24rpx 20rpx;
        background-color: #f8f9fd;
        border-radius: 10rpx;
        font-size: 26rpx;
        line-height: 40rpx;
      }
    }

    .information {
      margin-top: 42rpx;
      padding-top: 42rpx;
      border-top: solid 2rpx #f4f6f7;

      .title {
        margin-bottom: 24rpx;
        font-family: Source Han Sans CN;
        font-size: 30rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 29rpx;
        letter-spacing: 0rpx;
        color: #474b53;
      }

      .person {
        padding: 0 20rpx 24rpx 20rpx;
        background-color: #f8f9fd;
        border-radius: 10rpx;

        .details {
          display: flex;
          padding-top: 24rpx;
          font-family: Source Han Sans CN;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          line-height: 29rpx;
          letter-spacing: 0rpx;
          color: #474b53;
        }

        .special {
          width: 124rpx;
          color: #3b7de8;
        }
      }

      .school {
        margin-top: 20rpx;
        padding: 4rpx 20rpx 24rpx 20rpx;
        background-color: #f8f9fd;
        border-radius: 10rpx;

        .details {
          display: flex;
          padding-top: 20rpx;
          font-family: Source Han Sans CN;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          line-height: 29rpx;
          letter-spacing: 0rpx;
          color: #474b53;
        }

        .special {
          width: 176rpx;
          color: #3b7de8;
        }
      }

      .table {
        align-items: center;
        display: flex;
        margin-top: 20rpx;
        padding: 24rpx 36rpx 24rpx 24rpx;
        background-color: #f8f9fd;
        border-radius: 10rpx;

        .tableImg {
          padding-top: 21rpx;
          padding-bottom: 23rpx;
          width: 56rpx;
          height: 70rpx;
          margin-right: 20rpx;
        }

        text {
          padding-top: 21rpx;
          padding-bottom: 23rpx;
          font-family: Source Han Sans CN;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          line-height: 26rpx;
          letter-spacing: 0rpx;
          color: #474b53;
        }

        .download {
          padding-top: 25rpx;
          margin-left: auto;
          margin-right: 5rpx;
          width: 27rpx;
          height: 31rpx;
        }
      }

    }

    .detail {
      margin-top: 42rpx;
      border-top: solid 2rpx #f4f6f7;
      font-family: Source Han Sans CN;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rpx;
      color: #474b53;

      .name {
        padding-top: 42rpx;
        padding-bottom: 24rpx;
        font-size: 30rpx;
        line-height: 29rpx;

      }

      .informations {
        padding: 24rpx 20rpx 24rpx 20rpx;
        background-color: #f8f9fd;
        border-radius: 10rpx;
        font-size: 26rpx;
        line-height: 40rpx;
      }
    }

    .detailWait {
      padding: 25rpx;
      color: #b7bbbe;
      text-align: center;
    }
  }

  .bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    height: 98rpx;
    box-shadow: 0rpx -1rpx 8rpx 0rpx rgba(41, 80, 255, 0.08);
    background-color: #fff;

    button {
      margin-top: 17rpx;
      margin-left: 30rpx;
      width: 337rpx;
      height: 64rpx;
      border-radius: 10rpx;
      border: solid 2rpx #b7bbbe;
      opacity: 0.6;
      font-family: Source Han Sans CN;
      font-size: 28rpx;
      font-weight: normal;
      font-stretch: normal;
      line-height: 64rpx;
      letter-spacing: 0rpx;
      color: #b7bbbe;
      text-align: center;
    }

    .back {
      margin-right: 16rpx;
    }

    .resignup {
      margin-left: 0;
      background-color: #3b7de8;
      color: #ffffff;
    }
  }
</style>